<template>
  <!---------- 搜索表单区域 ----------->
  <SearchFormTemplate ref="searchRef" :searchConfig="searchConfig" @search="getTableData" @reset="handleReset" />

  <!---------- 顶部按钮区域 ----------->
  <ToolbarTemplate :toolbarConfig="toolbarConfig" />

  <!---------- 表格区域 ----------->
  <TableTemplate :columns="columns" ref="tableRef" />
  
  <!-- 添加表单 -->
  <MchReceiverGroupAdd ref="addRef" @dataReload="getTableData" />
  
  <!-- 修改表单  -->
  <MchReceiverGroupEdit ref="editRef" @dataReload="getTableData" />

</template>
<script setup lang="ts">
  import { onMounted, ref } from 'vue';
  import SearchFormTemplate from '@/components/template/form/search-form-template.vue';// 搜索区模版
  import ToolbarTemplate from '@/components/template/button/toolbar-template.vue';// 操作区模版
  import TableTemplate from '@/components/template/table/table-template.vue';//分页表格模版

  import MchReceiverGroupAdd from '@/views/mchreceivergroup/mchreceivergroup_add.vue';//模块添加页
  import MchReceiverGroupEdit from '@/views/mchreceivergroup/mchreceivergroup_edit.vue';//模块添加页
  import { type CustomTableColumnType } from '@/types/table';//扩展 TableColumnType 定义

  /* [显示弹窗] 1.调用子组件显示添加窗体 */
  const onAdd = () => {
    addRef.value?.show();//调用子组件 显式弹窗方法
  };
  const addRef = ref<typeof MchReceiverGroupAdd | null>(null);//模块添加模态弹窗组件引用，用与调用模态弹窗组件内部方法

  /* [显示弹窗] 1.接收传入的ID,2.调用子组件显示修改窗体 */
  const onEdit = (id: number) => {
    editRef.value?.show(id);//调用子组件 显示 弹窗方法
  };
  const editRef = ref<typeof MchReceiverGroupEdit | null>(null);//模块修改模态弹窗组件引用，用与调用模态弹窗组件内部方法
  
  /* [获取表格数据] 1.调用 table-template 组件的 getTableData 方法 获取数据 2.处理数据 3.赋值 */
  const getTableData = async (searchParams?: Record<string, any>) => { 
    //合并搜索参数和页面参数
    const mergedParams = searchParams ? { ...pageParams, ...searchParams } : pageParams;
    await tableRef.value?.getTableData(pageAction, mergedParams);
  };
  // 重置后重新拉数据
  const handleReset = () => {
    // 重置表格数据到初始状态
    getTableData();
  };
  const tableRef = ref<typeof TableTemplate | null>(null);//table-template组件引用，用于执行组件内部方法
  const pageAction = 'base.merchant.mchreceivergroup.ServiceImpl.page';//page数据 请求接口 方法名
  const pageParams = { account_type: "3" };//page数据 请求参数,查询总后台模块

  onMounted(() => { getTableData(); }); //组件加载完成时，获取表格数据

  /* [按钮配置] */
  const toolbarConfig = [
    {
      text: '新建',
      type: 'primary',
      icon: 'add' as const,
      permission: 'mchreceivergroup_add',
      onClick: onAdd
    }
  ];

  /* [搜索配置] */
  const searchConfig = [
    {title: '名称(未实现)',dataIndex: 'oem_name',type: 'input' as const,width: 150},
    {title: '创建时间(未实现)',dataIndex: 'create_time',type: 'date-range' as const,width: 250}
  ];

  /* [表格配置] */
  const columns: CustomTableColumnType<any>[] = [ 
    {title: '组名称',dataIndex: 'receiver_group_name'},
    {title: '所属OEM名称',fixed: 'left',dataIndex: 'oem_name'},
    {title: '所属商户名称',dataIndex: 'mch_name'},
    {title: '商户号',dataIndex: 'mch_no'},
    {title: '自动分账组',dataIndex: 'auto_status',options: {1: '是', 2: '否'}},
    {title: '创建时间',dataIndex: 'create_time',},
    {title: '更新时间',dataIndex: 'update_time',},
    {title: '操作',dataIndex: 'action',
      buttons: [
        {
          children: () => '修改',
          type: 'link',
          permission: 'oem_edit',
          onClick: (record) => onEdit(record.mch_receiver_group_id),
        },
        {
          // TODO: 删除功能未实现
          children: () => '删除',
          type: 'link',
          permission: 'oem_delete',
          onClick: (record) => { alert(`还没做,还没做,不要急`); },
        }
      ]
    }
  ]
</script>
<style lang="less" scoped>
</style>
